import React,{ useRef } from 'react';
import { Toast } from 'antd-mobile'
import './index.css';

function AddInput(props){
    const { isInputShow, addItem } = props,
          inputRef = useRef();
    const submitValue = () =>{
        const inputValue = inputRef.current.value.trim();
         if (inputValue.length === 0) {
               return;
         }
        addItem(inputValue);
        inputRef.current.value = '';
        Toast.info('新增成功',1);
    }
    
    return(
        <>
        {
            isInputShow 
            ? 
            (<div className="input-warpper">
                <input 
                className="input"
                ref={ inputRef }
                type="text"
                placeholder="请输入代办事项"
                />
                 <button 
                 className="button is-info"
                 onClick={submitValue}
                 >
                     增加
                 </button>
                 <hr/>
            </div>) 
            : 
            ''
        }
        </>
    );
}

export default AddInput;